<template>
	<view>
		<nav-custom :name="title"></nav-custom>
		<view class="list">
			<view class="black_f_40 font_w_bold bor_bot">
				买家给你评价啦，快来回复吧
			</view>
			<view class="back bor_bot dis_f_sb">
				<image class="a_img" :src="url+'/logo.png'" mode=""></image>
				<view class="list_er">
					<view class="black_f_32 font_w_bold slh_one mar_b_8">小牛电动 B0都市版新国标...</view>
					<view class="dis_f_sb_c">
						<view class="grey_f_28">2021新款;220V</view>
						<view class="black_f_28">x1</view>
					</view>
					<view class="black_f_28 list_er_p">￥50.25</view>
				</view>
			</view>
			<view class="back">
				<view class="top dis_f_l_c bor_b_16">
					<image class="tx_img mar_r_8" :src="url+'/logo.png'" mode=""></image>
					<view>
						<view>
							<text class="black_f_28 mar_r_8">yczx1024</text>
							<text class="grey_s_24">102天前</text>
						</view>
						<view>
							<u-rate :count="count" readonly allowHalf gutter="2" size="28rpx" activeColor="#FF6401"
								inactiveColor="#F7F7F7" v-model="value"></u-rate>
						</view>
					</view>
				</view>
				<view class="black_f_28 bor_b_16">
					朋友推荐过来的，质量什么的没得说。
				</view>
				<view class="image dis_f_l_c">
					<view class="image_a" v-for="i in 3">
						<image class="pl_img" :src="url+'/logo.png'" mode=""></image>
					</view>
					<view class="image_b white_f_40 font_w_bold">
						+3
					</view>
				</view>
			</view>
		</view>
		<image class="bot_img" :src="url+'/image/zcxian.png'" mode=""></image>
		<view class="bottom_text dis_f_sb_c" @click="show = true">
			<view class="text_a grey_c_28">
				请输入您的回复~
			</view>
			<view>
				<u-icon name="plus-circle" color="#333A47" size="22"></u-icon>
			</view>
			<view>
				<u-icon name="plus-circle" color="#333A47" size="22"></u-icon>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open">
			<view class="dis_f_sb_c box_text">
				<view style="width: 518rpx;height: 76rpx;">
					<u--textarea v-model="value1" autoHeight adjustPosition placeholder="请输入您的回复~"></u--textarea>
				</view>
				<view>
					<u-icon name="plus-circle" color="#333A47" size="22"></u-icon>
				</view>
				<view>
					<u-icon name="plus-circle" color="#333A47" size="22"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: " ",
				count: 5,
				value: 3.5,
				show: false,
				value1: '',
				url:'',
			}
		},
		onShow() {
			this.url=this.$.ajax_url3
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	.list {
		margin-top: 170rpx;
		padding: 0 32rpx;
	}

	.a_img {
		width: 200rpx;
		height: 200rpx;
		margin-right: 24rpx;
	}

	.list_er {
		width: 414rpx;
	}

	.list_er_p {
		margin-top: 52rpx;
		text-align: right;
	}

	.back {
		padding: 32rpx 24rpx;
	}

	.top {}

	.tx_img {
		width: 64rpx;
		height: 64rpx;
		border: 2rpx solid #F7FAFF;
		border-radius: 100rpx;
	}

	.image {
		position: relative;
	}

	.image_a {
		margin-right: 26rpx;
	}

	.image_a:nth-child(3n) {
		margin-right: 0;
	}

	.image_b {
		width: 196rpx;
		height: 196rpx;
		border-radius: 16rpx;
		background-color: rgba(0, 0, 0, 0.4);
		position: absolute;
		right: 0rpx;
		bottom: 6rpx;
		text-align: center;
		line-height: 196rpx;
	}

	.pl_img {
		width: 196rpx;
		height: 196rpx;
		border-radius: 16rpx;
	}

	.bot_img {
		width: 750rpx;
		height: 40rpx;
		position: fixed;
		bottom: 150rpx;
		left: 0;
	}

	.bottom_text {
		width: 686rpx;
		height: 108rpx;
		padding: 0 32rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: 30rpx;
	}

	.text_a {
		width: 518rpx;
		height: 76rpx;
		background: #F7F7F7;
		padding-left: 24rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 76rpx;
	}

	.box_text {
		width: 686rpx;
		padding: 24rpx 32rpx;
	}
</style>